<template>
	<view>
		<!-- 	<u-tabs class="tabs" :list="list1" @click="click" :scrollable="false"></u-tabs> -->
		<div class="tabs-container">
			<div class="tabs-header">
				<div v-for="(tab, index) in tabs" :key="index" class="tab" :class="{ active: activeTab === index }"
					@click="selectTab(index)" ref="tab">
					{{ tab }}
				</div>
				<div class="active-indicator" :style="indicatorStyle"></div>
			</div>
			<div class="tabs-content">
				<slot></slot>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0,
				tabs: ['Tab 1', 'Tab 2', 'Tab 3'], // 可以根据需要动态传入或设置
				indicatorPosition: 0,
				indicatorWidth: 0,
			}
		},
		computed: {
			indicatorStyle() {
				return {
					transform: `translateX(${this.indicatorPosition}px)`,
					width: `${this.indicatorWidth}px`,
				};
			},
		},
		mounted() {
			this.updateIndicator();
		},
		methods: {
			selectTab(index) {
				this.activeTab = index;
				this.updateIndicator();
			},
			updateIndicator() {
				this.$nextTick(() => {
					const tabs = this.$refs.tab;
					if (tabs && tabs[this.activeTab]) {
						const activeTab = tabs[this.activeTab];
						this.indicatorPosition = activeTab.offsetLeft;
						this.indicatorWidth = activeTab.offsetWidth;
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.tabs-container {
		width: 100%;
	}

	.tabs-header {
		display: flex;
		position: relative;
		border-bottom: 1px solid #F2F2F2;
	}

	.tab {
		flex: 1;
		padding: 10px 20px;
		cursor: pointer;
		position: relative;
		transition: color 0.3s;
		text-align: center;
		
	}

	.tab.active {
		color: #42b983;
		background: #e8f9ec;
		transition: background 0.3s;
		border-radius: 0 0 6px 6px;
	}

	.active-indicator {
		position: absolute;
		height: 100%;
		z-index: 1;
		transition: transform 0.3s, width 0.3s;

		// &::after{
		// 	content: '';
		// 	display: block;
		// 	position: absolute;
		// 	top: 0;
		// 	bottom: 0;
		// 	left: 0;
		// 	right: 0;
		// 	background: #e8f9ec;
		// 	height: 100%;
		// 	z-index: -1;
		// }
		&::before {
			content: '';
			display: block;
			position: absolute;

			left: 0;
			right: 0;
			background: #e8f9ec;
			z-index: 0;
			background-color: #42b983;
			border-radius: 4px;
			/* 水滴形状 */
			height: 4px;
			bottom: 0;
		}


	}
</style>